<template>
  <div>
    <div class="m-top">
      <div class="wrap">
        <h1 class="h1_logo" @click="$router.push('/'), (setCurrHeader(0))"></h1>
        <ul class="m-nav">
          <li
            v-for="(item, i) in navData"
            :key="i"
            :class="{ active: active === i }"
            @click="
              $router.push({ path: item.path }),
                (setCurrHeader(i)),
                setGoToPage(item.path)
            "
          >
            {{ item.name }}
          </li>
          <li>
            <i class="hot"></i>
          </li>
        </ul>

        <!-- 用户登录成功的头像，昵称，退出按钮 -->
        <div v-if="userInfo != null" class="userImg">
          <img :src="avatarUrl" alt="" />&nbsp;
          <span @click="logout()">退出</span>
        </div>
        <div v-else>
          <div class="login"><router-link to="/login">登录</router-link></div>
          <div class="login">
            <router-link to="/register">注册</router-link>
          </div>
        </div>

        <a href="#" class="creator">创作者中心</a>
        <div class="music-search">
          <!-- 搜索按钮实现ing -->
          <!-- <router-link :to="'/search?keywords=' + this.kw"
            ><span>搜索</span></router-link
          > -->

          <input
            @keyup.enter="goSearch"
            v-model="keywords"
            type="text"
            placeholder="音乐/视频/电台/用户"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  computed: {
    ...mapState(["userInfo", "goToPage", "currHeader"]),
    active() {
      return this.currHeader;
    },
    avatarUrl(){
      if (this.userInfo == null)
      {
        return "";
      }
      return this.userInfo.profile.avatarUrl
    }
  },
  watch: {},
  data() {
    return {
      keywords: "",
      navData: [
        { name: "发现音乐", path: "/" },
        { name: "我的音乐", path: "/myMusic" },
        { name: "歌手", path: "/singer" },
        { name: "歌单", path: "/playList/?cat=全部" },
        { name: "榜单", path: "/rankinglist" },
        { name: "下载客户端", path: "/songclient" },
      ],
    };
  },
  methods: {
    ...mapMutations(["updateUserInfo", "setGoToPage", "setCurrHeader"]),
    // 点击跳转主页
    home() {
      this.$router.push("/");
    },
    // 点击跳转我的音乐
    myMusic() {
      this.$router.push("/myMusic");
    },
    musicPlayer() {
      this.$router.push("/musicPlayer");
    },
    playList() {
      this.$router.push("/playList");
    },
    logout() {
      this.updateUserInfo(null);
      // 发送退出登录的请求
      var url = "logout";
      this.axios.get(url).then((res) => {
        console.log("logout");
        localStorage.clear();
      });
    },
    goSearch() {
      // 设置目标
      const target = "/search/" + this.keywords;
      if (this.$route.path != target) {
        this.$router.push(target);
      }
    },
  },
  mounted() {
    if (this.goToPage == "myMusic") {
      this.active = 1;
      this.setGoToPage("/myMusic");
    }
  },
};
</script>

<style lang="scss" scoped>
body {
  background-color: #f2f2f2;
}

.m-top {
  width: auto;
  height: 70px;
  background: #242424;
}

.m-top .wrap {
  width: 1100px;
  margin: 0 auto;
  height: 70px;
}

.h1_logo {
  cursor: pointer;
  float: left;
  width: 176px;
  height: 69px;
  background-position: 0 0;
  background-image: url(../assets/images/topbar.png);
  background-repeat: no-repeat;
}

.m-top .m-nav {
  float: left;
}

.m-top .m-nav li {
  float: left;
  height: 70px;
  line-height: 70px;
  color: #ccc;
  padding: 0 19px;
  cursor: pointer;
}
.m-top .m-nav li:last-child {
  position: relative;
  margin: 0;
  padding: 0;
  // width: 20px;
  height: 20px;
  margin-top: 15px;
  background-color: #555;
}
.active {
  background-color: #000;
  color: #fff;
}
.m-top .m-nav li:hover {
  background-color: #000;
  color: #fff;
}

.hot {
  position: absolute;
  left: -20px;
  top: 5px;
  display: block;
  width: 28px;
  height: 19px;
  background-position: -190px 0;
  background-image: url(../assets/images/topbar.png);
  background-repeat: no-repeat;
}

.m-top .music-search {
  width: 158px;
  height: 32px;
  float: right;
  margin-top: 19px;
  background-position: 0 -99px;
  background-color: #fff;
  border-radius: 32px;
  background-image: url(../assets/images/topbar.png);
  background-repeat: no-repeat;
  position: relative;
}

.m-top .music-search input {
  width: 75%;
  margin: 0;
  padding: 0;
  background: transparent;
  line-height: 16px;
  border: 0;
  margin: 7px 0 0 30px;
  font-size: 12px;
  color: #ccc;
}

.m-top .creator {
  width: 90px;
  height: 32px;
  float: right;
  margin: 19px 0 0 12px;
  padding-left: 16px;
  box-sizing: border-box;
  border: 1px solid #4f4f4f;
  line-height: 33px;
  color: #ccc;
  border-radius: 20px;
  font-size: 12px;
}

.m-top .creator:hover {
  border: 1px solid #fff;
  color: #fff;
}

.m-top .login {
  float: right;
  height: 45px;
  margin: 27px 0 0 20px;
  padding: 0 22px 0 0;
  font-size: 12px;
}

.m-top .login a {
  color: #787878;
  display: block;
  text-decoration: none;
}

.m-top .login a:hover {
  color: #ccc;
}
.userImg {
  float: right;
  margin: 20px 0 0 15px;
  color: #ccc;
  font-size: 12px;
}
.userImg span {
  cursor: pointer;
  color: #ccc;
}
.userImg span:hover {
  color: #fff;
}
.userImg img {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50px;
}
</style>